<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 100px;height: 100px;background: red;position: absolute;left:0;top:50px;}
        .box2{width: 100px;height: 100px;background: green;position: absolute;left:0;top:180px;}
    </style>
</head>
<body>
    <input type="button" id="btn1" value="开始">
    <div class="box"></div>
    <div class="box2"></div>
</body>
<script src="./jquery.js"></script>
<script>

    $("#btn1").click(function(){
        // 链式动画
        // 1. 借助回调函数
            // 绝对同步
            // 每次动画可以控制不同元素
        // $(".box").animate({
        //     left:500
        // },function(){
        //     alert(1)
        //     $(".box").animate({
        //         top:500
        //     })
        // });

        // 2. 链式调用
            // 绝对同步
            // 只能控制同一个元素
        // $(".box").animate({
        //     left:500
        // }).animate({
        //     top:500
        // })

        // 3. 多次分开添加动画
            // 多次给一个元素添加：动画之间是同步执行
            // 多次给不同元素添加：动画之间是异步执行
        // $(".box").animate({
        //     left:500
        // })
        // console.log("===============");
        // $(".box2").animate({
        //     top:500
        // })
        
        // 4. 利用jq提供的添加回调函数的方法：queue
            // queue的主要功能：给没有回调函数的方法，添加回调函数
            // 等同于回调函数
            // queue方法之后，默认无法继续链式调用，如需继续，需要在queue的回调函数身上接收一个参数，并作为函数执行，才能在queue后继续链式调用
        // $(".box").animate({
        //     left:500
        // }).queue(function(next){
        //     // alert(1)
        //     // console.log($(".box"));
        //     $(".box").css({
        //         background:"yellow"
        //     })
        //     next();
        // }).animate({
        //     top:500
        // })

        // 问题：
            // 动画方法和其他方法之间是异步执行
            // 借助回调函数，可以实现动画方法和其他方法之间的同步调用

        // $(".box").animate({
        //     left:500
        // }).css({
        //     background:"yellow"
        // })
        
        $(".box").animate({
            left:500
        },function(){
            $(".box").css({
                background:"yellow"
            })
        })
    })

    

</script>
</html>